<%--
  官方文档:  https://www.layui.com/demo/table/radio.html
  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>index</title>
    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">
    <script src="<c:url value="/js/my/commons.js"/>"></script>

    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            table.render({
                elem: '#tableId'
                , url: basePath + '/showProcessInstance.do'
                , toolbar: '#toolbarDemo'
                , cols: [[
                    {type: "numbers", title: '序号', width: 50}
                    , {field: 'processInstanceId', width: 100, title: '流程实例id'}
                    , {field: 'processDefinitionId', width: 150, title: '流程定义id'}
                    , {field: 'name', templet: '<div>{{d.order.name}}</div>', width: 100, title: '采购单名称'}
                    , {field: 'price', templet: '<div>{{d.order.price}}</div>', width: 100, title: '采购金额'}
                    , {field: 'content', templet: '<div>{{d.order.content}}</div>', width: 100, title: '采购详情'}
                    , {field: 'userId', templet: '<div>{{d.order.userId}}</div>', width: 100, title: '经办人'}
                    , {field: 'createtime', templet: '<div>{{d.order.createtime}}</div>', width: 200, title: '办理时间'}
                    , {
                        field: 'activityId',
                        templet: '<div>{{showStage(d.activityId)}}</div>',
                        width: 200,
                        title: '当前任务阶段'
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 100}
                ]]
                , page: true
            });

            //监听工具条
            table.on('tool(table_layui_filter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'detail') { //查看d
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:
                                '${pageContext.request.contextPath}/delProcessInstance/' + obj.data.processInstanceId + '.do',
                            type: 'DELETE',
                            success: function (data) {
                                if (data == 'success') {
                                    layer.msg('删除成功', {time: 1000});
                                }
                            }
                        })
                    });
                }
            });
        });
    </script>

    <%--操作工具条  {{d.xx.xx}} 可以读取到请求返回json的所有属性 可以一直嵌套  --%>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-bg-cyan layui-btn-xs" href="<c:url
        value="/view/showActivityMap.jsp?instanceId={{d.processInstanceId}}"/>">查看活动节点</a>
        <a class="layui-btn layui-bg-orange layui-btn-xs" href="<c:url
        value="/view/showProcessHistory.jsp?instanceId={{d.processInstanceId}}"/>">查看历史任务</a>

        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        <%--根据activityId显示对应阶段信息--%>

        function showStage(activityId) {
            switch (activityId) {
                case 'firstAudit':
                    return '部门经理审核';
                case 'createOrder':
                    return '创建订单'
            }
        }
    </script>

<body>

<table class="layui-hide" id="tableId" lay-filter="table_layui_filter"></table>

</body>
</html>
